<script lang="ts" setup>
  import { orderDetailApi } from '@/api/consult';
import useUserStore from '@/stores/user'
  import { onLoad } from '@dcloudio/uni-app'
import { io } from 'socket.io-client'
import roomStatus from './components/room-status.vue';

  const props = defineProps<{ orderId: string; payResult: string }>()

  const store = useUserStore()

  onLoad(() => {
    if (props.payResult === 'false') {
      uni.switchTab({
        url: '/pages/my/my',
      })

      return
    }

    // 连接到服务器

    const socket = io('https://consult-api.itheima.net', {
      auth: { token: 'Bearer ' + store.token },
      query: { orderId: props.orderId },
      transports: ['websocket', 'polling'],
      timeout: 5000,
    })

    socket.on('connect', () => {
      console.log('连接成功')
    })
  })

  const getOrderInfo = async () => {
    const res = await orderDetailApi(props.orderId)
    console.log('res  ----->  ', res)
  }

  onLoad(() => {
    getOrderInfo()
  })
</script>

<template>
  <view class="room-page">
    <!-- 咨询室状态 -->
    <room-status :status="1" status-value="1" :countdown="1" />
    <!-- 消息列表 -->

    <scroll-view
      refresher-enabled
      refresher-background="#f2f2f2"
      scroll-y
      style="flex: 1; overflow: hidden"
    >
      <view class="message-container">
        <!-- 此处将来填充更多代码... -->
      </view>
    </scroll-view>

    <!-- 发送消息 -->
    <view class="message-bar">
      <template v-if="true">
        <uni-easyinput
          disabled
          :clearable="false"
          :input-border="false"
          placeholder-style="font-size: 32rpx; color: #c3c3c5;"
          placeholder="问医生"
        />
        <view class="image-button">
          <uni-icons size="40" color="#979797" type="image"></uni-icons>
        </view>
      </template>
      <button v-else class="uni-button">咨询其它医生</button>
    </view>
  </view>
</template>

<style lang="scss">
  @import './room.scss';
</style>